<template>
	<view class="content" v-if="defultBankFlag">
		<u-navbar
			leftIconSize="32rpx" 
			:placeholder="true" 
			:fixed="true" 
			:safeAreaInsetTop="true" 
			:autoBack="true"
			bgColor="#ec6a38"
			:border-bottom="false">
				<view slot="left">
					<u-icon  @click="back" size="42" name="arrow-left" color="#fff"></u-icon>
				</view>
				<view slot="center" style="display: flex;justify-content: center;color: #fff;">
					快捷收银
				</view>
				<!-- #ifdef APP-PLUS -->
				<view slot="right" style="color: #fff;" @click="openPage('pages/creditcard/cashier/list')">
					收银记录
				</view>
				<!-- #endif -->
			</u-navbar>
		
		
		<view class="main">
			<view class="t">
				<view class="title">
					收款账户
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<view @click="openPage('pages/creditcard/cashier/list')" class="jilu">
					收银记录
				</view>
				<!-- #endif -->
			</view>
			<view @click="openPage('/pages/creditcard/cashier/selectDebitCard')" class="d">
				<view class="l">
					<image :src="defultBank.bank_logo" mode=""></image>
					<view class="bankInfo">
						<view class="h3" v-if="defultBank.name">
							{{defultBank.name}}
						</view>
						<view class="p" v-if="defultBank.full_card_number">
							**** **** ****
							{{defultBank.full_card_number.substring(defultBank.full_card_number.length-4)}}
						</view>
					</view>
				</view>
				<view class="r">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="t" style="    display: flex;
				align-items: center;
				justify-content: space-between;
				height: 100rpx;
				font-size: 32rpx;
				color: #8e8e8e;">
				<view class="title">
					收款金额
				</view>
			</view>
			<view class="input" style="padding: 30rpx 0;
				border-bottom: 1px solid #dedede;
				display: flex;
				align-items: baseline;
				font-size: 22rpx;">
				¥ <input type="number" style="margin-left: 10rpx;
					flex: 1;
					font-size: 36rpx;
					width: 100rpx;" v-model="amount" value="" placeholder="请输入收款金额" placeholder-style="font-size:36rpx;" />
			</view>
			<view class="btn" @click="submit" style="width: 100%;
				height: 84rpx;
				color: #fff;
				font-size: 30rpx;
				text-align: center;
				line-height: 84rpx;
				border-radius: 20rpx;
				background-color: #ec6a38;
				margin-top: 50rpx;">
				发起收银
			</view>
		</view>
	</view>
</template>

<script>
	import {bankcard} from '@/common/bankcard.api.js'
	export default {
		data() {
			return {
				defultBankFlag: false,
				defultBank: {},
				amount: '',
				background:{
					backgroundColor: '#ec6a38',
				}
			}
		},
		onShow() {
			uni.$on('bankInfo', (bankInfo) => {
				this.defultBank = bankInfo.addrsssid
				this.defultBankFlag = true
			})
			if (JSON.stringify(this.defultBank) == "{}") {
				this.getBankInfo();
			}
		},
		methods: {
			openPage(path, params = {}) {
				this.$u.route({
					url: path,
					params
				})
			},
			back() {
				this.$u.route({
					type: 'navigateBack'
				})
			},
			// 获取银行卡信息 默认
			getBankInfo() {

				let params = {
					page: 1,
					type: '00',
					page_size: 20
				}
				bankcard(params).then(res => {
					console.log(res)
					this.defultBankFlag = true
					this.defultBank = res.list[0]
				})
			},
			submit() {
				if (!JSON.stringify(this.defultBank)) {
					uni.showToast({
						icon: 'none',
						title: '请选择银行卡'
					})
					return
				} else {
					if (!this.defultBank.id) {
						uni.showToast({
							icon: 'none',
							title: '请选择银行卡'
						})
						return
					}
				}

				if (!this.amount) {
					uni.showToast({
						icon: 'none',
						title: '请输入收款金额'
					})
					return
				};
				uni.navigateTo({
					url: `/pages/creditcard/cashier/selectCreditCard?amount=${this.amount}&repayment_bank_id=${this.defultBank.id}`
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #f4f5f7;
	}
</style>
<style scoped lang="scss">
	.main {
		background-color: #fff;
		margin: 20rpx 0;
		padding: 0 30rpx;
		padding-bottom: 30rpx;

		.t {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 100rpx;
			font-size: 32rpx;
			color: #8e8e8e;

			.jilu {
				color: #ec6a38;
				font-size: 28rpx;
				display: flex;
				flex-direction: row;
			}
		}

		.d {
			padding: 20rpx 0;
			border-bottom: 1px solid #eee;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 30rpx;

			image {
				width: 90rpx;
				height: 90rpx;
				border-radius: 100%;
				margin-right: 15rpx;
				margin-top: -5rpx;
			}

			.l {
				display: flex;
				align-items: center;

				.h3 {
					margin-bottom: 5rpx;
					margin-top: 5rpx;
				}
			}
		}
	}

	.input {
		padding-bottom: 30rpx;
		border-bottom: 1px solid #dedede;
		display: flex;
		align-items: center;
		font-size: 35rpx;

		input {
			margin-left: 10rpx;
			flex: 1;
			font-size: 30rpx;
			font-weight: bold;
			width: 100rpx;
		}
	}

	.btn {
		width: 100%;
		height: 84rpx;
		color: #fff;
		font-size: 30rpx;
		text-align: center;
		line-height: 84rpx;
		border-radius: 20rpx;
		background-color: #ec6a38;
		margin-top: 50rpx;
	}
</style>
